<template>
	<view class="container" >
		<my-header>
			<view class="header-box">
				<view class="header-hide">...</view>
				<view class="header-title">全部</view>
				<view @click="toSearch">
					<uni-icons type="search" size="24"></uni-icons>
				</view>
			</view>
		</my-header>
		<view class="my-container">
			<view @click="toDetail(item.id)" class="flex-btw books-list-item" v-for="(item, index) in novels" :key="index">
				<image v-if="item.img" :src="item.img" class="book-small-image"></image>
				<image v-if="!item.img" src="@/static/no.jpeg" class="book-small-image"></image>
				<view>{{item.name}}</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	
	export default {
		data() {
			return {
				novels: [],
				page: 1
			}
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url:'./books-introduce?id=' + id
				})
			},
			toSearch() {
				uni.navigateTo({
					url: './search'
				})
			}
		},
		async onLoad() {
			uni.showLoading({
				title: '...'
			})
			const novelList = await this.myApi({
				url: '/api/novels',
				domain: true,
				data: {page: this.page}
			})
			uni.hideLoading()
			this.novels = novelList.data
			this.page++
		},
		async onReachBottom() {
			uni.showNavigationBarLoading()
			let nlist = await this.myApi({
				url: '/api/novels',
				domain: true,
				data: {page: this.page}
			})
			
			if(nlist.status == 10010) {
				uni.showToast({
					title: '没有了',
					icon: 'none'
				})
			} else {
				this.novels = this.novels.concat(nlist.data)
				this.page++
			}
			uni.hideNavigationBarLoading()
		},
	}
</script>

<style>
	
	
	
	.container {
		/* padding-top: 50rpx; */
		height: 100vh;
	}
	
	.header-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		padding: 0 30rpx;
	}
	
	.header-title {
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.search-view {
		font-size: 36rpx;
	}
	
	.header-hide {
		color: #fff;
	}
	
	
	.books-list-item {
		padding: 15rpx 0;
	}
	
	.flex-btw {
	    display: flex;
	    justify-content: flex-start; 
	    align-items: center;
		text-align: center;
	}
	
	.detail-btn {
	    padding: 15rpx 40rpx;
	    border: 1rpx solid #ccc;
	    border-radius: 40rpx;
	}
	
	.book-small-image {
	    width: 80rpx;
	    height: 100rpx;
	    padding-right: 25rpx;
	}
</style>
